<template>
	<view>
		<!-- 一行两个 -->
		<view class="videocss" v-if="vk.vuex.get('$app.appinfo.twoInRow')">
			<view class="video-item" v-for="(item,index) in videoList" :key="index" @click="toVideoDetail(item)">
				<image class="video-pic" :src="item.tv_image"></image>
				<view class="tv_name">
					<text class="tagcss" :style="{backgroundColor: item.tag_color,}">{{item.tag_text}}</text>
					{{item.tv_name}}
				</view>
			</view>
		</view>

		<!-- 一行三个 -->
		<view class="classtwo" v-else>
			<view class="recommend_item" style="width: 220rpx;" v-for="(item,index) in videoList" :key="index"
				@click="toVideoDetail(item)">
				<image :src="item.tv_image" class="classone"></image>
				<view class="tv_name">{{item.tv_name}}</view>
				<view class="update_num" v-if="!item.is_end">更新至第{{item.update_witch}}集</view>
				<view class="update_num" v-else>已完结共{{item.all_series}}集</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "videolist",
		data() {
			return {

			};
		},
		props: ['videoList'],
		methods: {
			async toVideoDetail(item) {
				if (item.tv_id) {
					const tvinfo = await db.collection('a_tv').doc(item.tv_id).get()
					item = tvinfo.result.data[0]
				}
				vk.vuex.set('$app.currenttv', item)
				uni.navigateTo({
					url: '/pages/player/player?tv_id=' + item._id + "&series=" + item.series,
				})
			},
		}
	}
</script>

<style lang="scss">
	// 一行三个样式
	.classone {
		width: 220rpx;
		border-radius: 10rpx;
		height: 328rpx;
	}

	.classtwo {
		display: flex;
		flex-wrap: wrap;
		margin-left: 15rpx;
	}


	.recommend_item {
		width: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx 10rpx;
	}

	.tv_name {
		margin: 4rpx 6rpx;
		font-size: 28rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.update_num {
		font-size: 24rpx;
		color: #888888;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	// 一行2个样式

	.videocss {
		display: flex;
		flex-wrap: wrap;
	}

	.tv_name {
		font-size: 28rpx;
		margin-bottom: 8rpx;
		display: -webkit-box;
		overflow: hidden;
		white-space: normal !important;
		text-overflow: ellipsis;
		word-wrap: break-word;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.video-item {
		margin: 12rpx 20rpx;
		box-shadow: 0 4rpx 8rpx 0 rgba(121, 121, 121, 0.2);
		border-radius: 0 0 10rpx 10rpx;
		width: 335rpx;
	}

	.video-pic {
		width: 100%;
		height: 500rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.tagcss {
		font-size: 20rpx;
		color: #fff;
		padding: 1rpx 10rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
	}
</style>
